<template>
    <div :class="s.dataTable" v-loading="loading">
        <template v-if="!loading && data.length">
            <div :class="s.top" v-if="canSearch">
                <p :class="s.total">
                    共&nbsp;<span>{{ list.length }}</span
                    >&nbsp;首歌曲
                </p>
                <el-input
                    placeholder="搜索歌曲名/歌手/专辑"
                    prefix-icon="el-icon-search"
                    v-model="keyword"
                    :class="s.input"
                    size="mini"
                ></el-input>
            </div>
            <el-row :class="[s.row, s.thead]">
                <el-col :span="spanList[0]">歌曲</el-col>
                <el-col :span="spanList[1]">歌手</el-col>
                <el-col :span="spanList[2]">专辑</el-col>
                <el-col :span="spanList[3]" v-if="showVendor">来源</el-col>
                <el-col :span="spanList[4]" v-if="spanList[4]">{{
                    slotAppendTitle
                }}</el-col>
            </el-row>
            <el-row
                v-for="(item, index) in filterList"
                :class="{ [s.row]: true, [s.disabled]: item.cp }"
                :key="item.songId"
                @click.native="$emit('rowClick', item)"
                @contextmenu.native="showContextMenu(item)"
                @dblclick.native="doPlay(item)"
            >
                <el-col :span="spanList[0]">
                    <div :class="s.nameItem">
                        <div :class="s.nameMain">
                            <div :class="s.songName" :title="item.name">
                                {{ item.name }}
                            </div>
                            <quality
                                v-if="
                                    item.quality &&
                                        (item.quality['320'] ||
                                            item.quality['999'])
                                "
                                :sq="item.quality['999']"
                                :class="s.quality"
                            ></quality>
                        </div>
                        <div :class="s.songControl" v-if="showOperate">
                            <slot
                                name="songControlPrepend"
                                :row="item"
                                :$index="index"
                            ></slot>
                            <Icon
                                type="item-play"
                                @click="doPlay(item)"
                                v-if="!item.cp"
                                clickable
                            ></Icon>
                            <Icon type="like" disabled v-if="showLike"></Icon>
                            <Icon
                                type="download"
                                v-if="canDownload"
                                clickable
                                :disabled="item.cp"
                                @click="download(item)"
                            ></Icon>
                            <slot
                                name="songControlAppend"
                                :row="item"
                                :$index="index"
                            ></slot>
                            <Icon
                                type="more"
                                clickable
                                @click="showContextMenu(item)"
                                v-if="contextMenu"
                            ></Icon>
                        </div>
                    </div>
                </el-col>
                <el-col :span="spanList[1]">
                    <template v-for="artist in item.artists">
                        <router-link
                            v-if="artist.id"
                            :class="s.link"
                            :to="{
                                name: 'artist.detail',
                                params: { id: artist.id },
                                query: { vendor: item.vendor },
                            }"
                        >
                            {{ artist.name }}
                        </router-link>
                        <template v-else>
                            {{ artist.name }}
                        </template>
                    </template>
                </el-col>
                <el-col :span="spanList[2]">
                    <router-link
                        v-if="item.album.id"
                        :class="s.link"
                        :to="{
                            name: 'album.detail',
                            params: { id: item.album.id },
                            query: { vendor: item.vendor },
                        }"
                    >
                        {{ item.album.name }}
                    </router-link>
                    <template v-else>
                        {{ item.album.name }}
                    </template>
                </el-col>
                <el-col :span="spanList[3]" v-if="showVendor">
                    {{ item.vendor | source }}
                </el-col>
                <el-col :span="spanList[4]" v-if="spanList[4]">
                    <slot name="append" :row="item"></slot>
                </el-col>
            </el-row>
            <el-pagination
                v-if="pagination && !loading && data.length > limit"
                layout="prev, pager, next"
                :total="data.length"
                style="text-align: center; margin-top: 8px;"
                :current-page.sync="page"
                :page-size="limit"
            ></el-pagination>
        </template>
        <div :class="s.nodata" v-else>
            <Icon type="wushuju" :class="s.icon"></Icon>
            <p>暂无数据~</p>
        </div>
    </div>
</template>
<script>
import { mapActions } from 'vuex'

export default {
    props: {
        data: {
            type: Array,
            required: true,
        },
        loading: {
            type: Boolean,
            default: false,
        },
        showVendor: {
            type: Boolean,
            default: true,
        },
        showOperate: {
            type: Boolean,
            default: true,
        },
        spanWidth: Array,
        slotAppendTitle: String,
        pagination: {
            type: Boolean,
            default: true,
        },
        canSearch: {
            type: Boolean,
            default: false,
        },
        contextMenu: {
            type: Boolean,
            default: true,
        },
        canDownload: {
            type: Boolean,
            default: true,
        },
        showLike: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            page: 1,
            limit: 20,
            keyword: '',
        }
    },
    computed: {
        spanList() {
            return this.spanWidth
                ? this.spanWidth
                : this.showVendor
                ? [9, 7, 5, 3]
                : [10, 8, 6]
        },
        list() {
            if (!this.pagination) return this.data
            const start = (this.page - 1) * this.limit

            return this.data.slice(start, start + this.limit)
        },
        filterList() {
            return this.list.filter(song => {
                return (
                    song.name.includes(this.keyword) ||
                    song.artists
                        .reduce((a, b) => a + b.name, '')
                        .includes(this.keyword) ||
                    song.album.name.includes(this.keyword)
                )
            })
        },
    },
    methods: {
        ...mapActions('play', ['play']),
        ...mapActions('download', ['download']),
        doPlay(item) {
            this.play({
                info: item,
                playlist: this.data,
            })
        },
        // 显示右键菜单
        showContextMenu(item) {
            if (!this.contextMenu) return
            this.$contextMenu.song(
                {
                    ...item,
                    id: item.songId,
                },
                this.data
            )
        },
    },
}
</script>
<style lang="scss" module="s">
.dataTable {
    color: $color-content;
    font-size: 13px;
    padding: 0 20px;
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid $color-border4;
        padding: 24px 10px 12px;
        .total {
            font-size: 14px;
            color: $color-content;
            span {
                color: $color-primary;
            }
        }
        .input {
            width: 200px;
        }
    }
    .row {
        transition: all 0.2s;
        :global {
            .el-col {
                display: block;
                height: 48px;
                line-height: 48px;
                padding: 0 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        &:not(.thead):hover {
            transition: all 0.2s;
            background: #f5f7fa;
        }
        &.thead {
            font-weight: bold;
        }
        .nameItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            .nameMain {
                display: flex;
                align-items: center;
                overflow: hidden;
                flex: 1;
                .songName {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor: pointer;
                    user-select: none;
                }
                .quality {
                    margin-left: 6px;
                }
            }

            .songControl {
                display: none;
                align-items: center;
                color: $color-content;
                flex-shrink: 0;

                svg {
                    margin-left: 9px;
                    font-size: 14px;
                }
            }
        }
        &:hover {
            .songControl {
                display: flex;
            }
        }
        .link {
            color: $color-content;
            text-decoration: none;
            &:hover {
                color: $color-primary;
            }
        }
        &.disabled {
            color: rgba(68, 68, 68, 0.6);
            .link {
                color: rgba(68, 68, 68, 0.6);
            }
        }
    }
    .nodata {
        display: flex;
        width: 100%;
        min-height: 200px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .icon {
            font-size: 100px;
        }
        p {
            margin: 0;
        }
    }
}
</style>
